<template>
    <div class="balance_detail">
        <van-nav-bar :title="capital_type == 2 ? '贡献值数据' : '收益数据'" left-arrow fixed @click-left="onClickLeft">
        </van-nav-bar>
        <div class="balance_detail_top">
            <div class="balance_detail_top_left">
                <div>{{ incomeType.income_today }}</div>
                <div>今日已入账</div>
            </div>
            <div class="balance_detail_top_left" @click="handleWait(capital_type)">
                <div>{{ incomeType.income_wait }}</div>
                <div>预估收益 <img src="../../images/more_icon.png" alt=""></div>
            </div>
            <div class="balance_detail_top_left">
                <div>{{ incomeType.income_total }}</div>
                <div>总入账收益</div>
            </div>
        </div>
        <div class="revenue_tip" v-html="incomeType.tip_msg"></div>
        <!-- <div class="revenue_tip"></div> -->
        <div class="balance_detail_content">
            <!--  -->
            <div class="balance_account">
                <div class="balance_account_title">我的账单</div>
                <div style="display: flex;">
                    <div class="balance_detail_content_day" @click="statusShow = true">{{ status }}<van-icon
                            name="arrow-down" style="color: #999;" /></div>
                    <div class="balance_detail_content_day" @click="typeShow = true">{{ types }}<van-icon
                            name="arrow-down" style="color: #999;" /></div>
                    <div class="balance_detail_content_day" @click="dayShow = true">{{ days }}<van-icon
                            name="arrow-down" style="color: #999;" /></div>
                </div>
            </div>
            <div class="balance_total_amt">共{{ total_amount }}元</div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="balance_list" v-for="(item, index) in fansList" :key="index">
                    <div class="balance_list_left">
                        <div>{{ item.remark }}</div>
                        <div>{{ item.time }}</div>
                    </div>
                    <div class="balance_list_right">
                        <div
                            :style="{ color: item.status == 10 ? '#FF6200' : item.status == 20 ? '#31A653' : '#F9301B' }">
                            {{ item.status == 10 ? '待入账' : item.status == 20 ? '已入账' : '已退回' }}
                        </div>
                        <!-- {{ item.income == true ? '+' : '-' }} -->
                        <div>+{{ item.amount }}</div>
                    </div>
                    <!-- <div class="balance_list_right" :style="{ color: item.income == true ? '#55A624' : '#F32A23' }">
                        {{ item.income == true ? '+' : '-' }}{{ item.amount }}</div> -->

                </div>
            </van-list>
        </div>

        <van-popup v-model="dayShow" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker :value="new Date(currentDate)" type="date" title="选择年月日" :min-date="minDate"
                :max-date="maxDate" @confirm="onConfirmDay" @cancel="onCancelDay" />
        </van-popup>
        <!-- 状态 -->
        <van-action-sheet v-model="statusShow" :actions="statusList" cancel-text="取消" close-on-click-action
            @cancel="onStatusCancel" @select="handleSelect" />
        <!-- 类型 -->
        <van-action-sheet v-model="typeShow" :actions="typeList" cancel-text="取消" close-on-click-action
            @cancel="onTypeCancel" @select="handleTypeSelect" />
    </div>
</template>
<script>
import { parseTime } from '@/tool/methods'
import {
    INCOME_DATA,
    CAPITAL_LIST
} from "@/api/mine";
export default {
    name: 'balance',
    data() {
        return {
            days: "时间",
            types: "类型",
            status: "状态",
            dayShow: false,
            minDate: new Date(1930, 0, 1),
            maxDate: new Date(2999, 10, 1),
            currentDate: new Date(),
            loading: false,
            finished: false,
            notifyList: [],
            msg: null,
            incomeType: {},
            fansList: [],
            page: 1,
            year: '',
            month: '',
            day: '',
            pageSize: 20,
            date_range: 1,
            showPopover: false,
            actions: [{ text: '' }],
            isScrolled: false,
            statusShow: false,
            // statusList: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
            statusList: [{ name: "待入账", id: 1 }, { name: "已入账", id: 2 }, { name: "已退回", id: 3 }],
            typeShow: false,
            typeList: [{ name: "直推奖", id: 1 }, { name: "团队分红", id: 2 }, { name: "区域收益", id: 3 }, { name: "合伙人分红", id: 4 }],
            type: null,
            status_s: null,
            total_amount: 0,
            capital_type: null,
        }
    },
    created() {

    },
    mounted() {
        this.msg = this.$route.query.id
        this.capital_type = this.$route.query.capital_type
        document.title = this.msg == 1 ? '我的余额' : this.msg == 2 ? '数字资产' : '贡献值'
        this.getIncome()
        window.addEventListener("scroll", this.handleScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.handleScroll);

    },
    methods: {
        //预估收益
        handleWait(capital_type){
            this.$router.push({name:'estimate',query:{capital_type:capital_type}})
        },
        handleScroll() {
            // console.log(window.scrollY);
            this.isScrolled = window.scrollY > 26;
        },
        //
        onStatusCancel() {
            this.statusShow = false
            this.status = '状态'
            this.status_s = null
            this.handleRevenue()
        },
        handleSelect(e) {
            // console.log(e);
            this.status = e.name
            this.status_s = e.id
            this.handleRevenue()
        },
        //
        onTypeCancel() {
            this.typeShow = false
            this.types = '类型'
            this.type = null
            this.handleRevenue()

        },
        handleTypeSelect(e) {
            // console.log(e);
            this.types = e.name
            this.type = e.id
            this.handleRevenue()

        },
        handleRevenue() {
            this.page = 1
            this.loading = true
            this.fansList = []
            this.finished = false
            this.onLoad()
        },
        getIncome() {
            // 传递参数
            let params = {};
            params['capital_type'] = this.capital_type;
            this.$http.get(INCOME_DATA, {
                params: params
            }).then(res => {
                this.incomeType = res.data
                // this.actions = [{ text: res.data.introduce }]
            })
        },
        onClickLeft() {
            this.$router.back()
        },
        // onClickRight(){
        //     this.$router.push({name:'limitAmt'})
        // },
        onConfirmDay(val) {
            this.currentDate = parseTime(val, '{y}-{m}-{d}')
            this.days = this.currentDate
            this.year = this.currentDate.split('-')[0]
            this.month = this.currentDate.split('-')[1]
            this.day = this.currentDate.split('-')[2]
            this.date_range = 0
            this.dayShow = false
            this.handleRevenue()
        },
        onCancelDay() {
            this.dayShow = false
            // this.days = null
            this.days = '时间'
            this.year = ''
            this.month = ''
            this.day = ''
            // this.page = 1
            // this.fansList = []
            this.date_range = 1
            this.handleRevenue()
        },
        onLoad() {
            // this.fansList = [{ remark: '11', amount: "10", create_time: "2022-01-01", status: 2 }]
            // return
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            // params['type'] = this.msg == 1 ? 20 : 21;
            params['type'] = this.type;
            params['status'] = this.status_s
            params['year'] = this.year;
            params['month'] = this.month;
            params['day'] = this.day;
            params['capital_type'] = this.capital_type;
            // params['status'] = this.active;
            this.$http.get(CAPITAL_LIST, {
                params: params
            }).then((res) => {
                const {
                    list
                } = res.data;
                this.total_amount = res.data.total_amount;
                if (list && list.length) {
                    this.page++;
                    this.fansList = this.fansList.concat(list);

                    // 加载状态结束
                    this.loading = false;
                    if (list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.balance_detail {
    padding-top: 46px;
    background-color: #F2F4F5;
    min-height: calc(100vh - 46px);

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }

    ::v-deep .van-icon {
        color: #333;
    }

    ::v-deep .van-nav-bar__title {
        width: 150px;
        color: #333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__text {
        color: #fff;
    }

    ::v-deep .van-nav-bar {
        // background: transparent;
        // position: fixed; // 改为固定定位
        // top: 0; // 添加这行
        // left: 0; // 添加这行
        // right: 0; // 添加这行
        // z-index: 1000; // 添加这行，确保它在其他元素之上

        // position: fixed;
        &.scrolled {
            background-color: #ffffff; // 或者你想要的任何颜色

            .van-nav-bar__title,
            .van-icon,
            .van-nav-bar__text {
                color: #333; // 滚动后变为黑色
            }
        }
    }

    .balance_detail_top {
        width: 95%;
        margin: 0.32rem auto;
        // height: 2.24rem;
        background: url('../../images/mine/img_beij5.png') no-repeat center;
        background-size: cover;
        color: #fff;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-radius: .12rem;
        padding: .6rem 0;

        .balance_detail_top_left {
            width: 33%;

            div:nth-child(1) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .4rem;
                color: #FFFFFF;
                line-height: .84rem;
                text-align: center;
                font-style: normal
            }

            div:nth-child(2) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .26rem;
                color: #FFFFFF;
                line-height: .44rem;
                // text-align: right;
                font-style: normal;
                margin-top: .08rem;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: .24rem;
                    height: .24rem;
                    margin-left: .08rem;
                }
            }
        }

        .balance_btn {
            height: .72rem;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid #FFFFFF;
            border-radius: .44rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            color: #FFFFFF;
            line-height: .72rem;
            text-align: center;
            font-style: normal;
            padding: 0 .5rem;
            box-sizing: border-box;
            margin-top: 0.2rem;
        }

        .balance_tx {
            // margin-top: .2rem;
            border: 1px solid #FFFFFF;
            background: #FFFFFF;
            color: #31A653;
        }

    }

    .revenue_tip {
        width: 95%;
        margin: 0 auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .24rem;
        color: #FF6200;
        margin-bottom: .32rem;
    }

    .balance_detail_content {
        width: 95%;
        height: calc(100vh - 4rem);
        margin: 0 auto;
        border-radius: .2rem;
        overflow: auto;
        // border-top-right-radius: .2rem;
        background: #fff;
        padding-top: .4rem;
        box-sizing: border-box;
        // margin-top: -1.9rem;
        position: relative;
        z-index: 1;
        padding: .2rem;
        box-sizing: border-box;

        .balance_total_amt {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #31A653;
            margin-top: .2rem;
        }

        .balance_account {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .balance_account_title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .28rem;
                color: #333333;
            }
        }

        .balance_detail_content_day {
            // min-width: 1.2rem;
            // max-width: 2rem;
            border-radius: .36rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #666666;
            padding: .08rem 0;
            box-sizing: border-box;
            text-align: center;
            font-style: normal;
            border: 1px solid #8A8A8A;
            padding: 0.06rem .2rem;
            margin-left: .28rem;

            ::v-deep .van-icon {
                color: #666;
            }
        }

        .balance_list {
            margin-top: .2rem;
            padding-bottom: .2rem;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            justify-content: space-between;

            .balance_list_left {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #333333;
                line-height: .4rem;
                // text-align: left;
                font-style: normal;

                div:last-child {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: .24rem;
                    color: #999999;
                    line-height: .34rem;
                    // text-align: left;
                    font-style: normal;
                    margin-top: .12rem;

                }
            }

            .balance_list_right {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .32rem;
                color: #333;
                line-height: .44rem;
                // text-align: center;
                font-style: normal;
                text-align: right;

                div:first-child {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: .24rem;
                }
            }
        }

    }
}

.tips {
    width: 50%;
    min-height: auto;
    max-height: 2rem;
    overflow: auto;
    position: absolute;
    left: 30%;
    top: 90%;
    background: #333;
    white-space: wrap;
    border-radius: .1rem;
    text-align: left;
    padding: .1rem;
    font-size: .28rem;
    font-weight: 400;
}

.tips::after {
    content: '';
    position: absolute;
    left: 50%;
    /* 使三角形居中 */
    bottom: 100%;
    /* 放置在 tips 的上方 */
    margin-left: -0.1rem;
    /* 调整位置，使三角形居中 */
    border-width: 0.1rem;
    /* 设置三角形的大小 */
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    /* 三角形颜色 */
}
</style>